<template>
 <scroll-view 
 scroll-y 
 class="recommend_view" 
 @scrolltolower="handleTolower"
 v-if="recommend.length !== 0">
 
	<view class="recommend_wrap">
		<navigator class="recommend_item"
		v-for="item in recommend"
		:key="item.id"
		:url="`/pages/album/index?id=${item.id}`"
		>
			<image :src="item.thumb" mode="widthFix"></image>
		</navigator>
	</view>
	
	<view class="monthes_wrap">
		<view class="monthes_title">
			<view class="monthes_title_info">
				<view class="monthes_info">
					<text>{{monthes.MM}} / </text>
					 {{monthes.DD}} 月 
				</view>
				<view class="monthes_text">{{monthes.title}}</view>
			</view>
			<view class="monthes_title_more">
				更多>
			</view>
		</view>
		<view class="monthes_content">
			<view class="monthes_item"
			v-for="(item, index) in monthes.items"
			:key="item.id"
			>
				<goImgDetail :list="monthes.items" :index="index">
					<image :src="item.thumb + item.rule.replace('$<Height>', 360)" mode="aspectFill"></image>
				</goImgDetail>
			</view>
		</view>
	</view>
	
	<view class="hots_wrap">
		<view class="hots_title">
			<text>热门</text>
		</view>
		<view class="hots_content">
			<view class="hot_item"
			v-for="(item, index) in vertical"
			:key="item.id"
			>	
				<goImgDetail :list="vertical" :index="index">
					<image :src="item.thumb" mode="widthFix"></image>
				</goImgDetail>
			</view>
		</view>
	</view>
	
 </scroll-view>
</template>

<script>
	import goImgDetail from '../../../common/goImgDetail.vue'
	import moment from 'moment';
	export default {
		components: {
			goImgDetail
		},
		data () {
			return {
				params: {
					limit: 30,
					order: "hot",
					skip: 0
				},
				recommend: [],
				monthes: {},
				vertical: [],
				
				haveMore: true
			}
		},
		mounted() {
			this.getHot()
		},
		methods: {
			async getHot() {
				const res = await this.$http({
					url: '/image/v3/homepage/vertical',
					data: this.params
				})
				console.log(res)
				if(res.code == 0) {
					if(res.res.vertical.length == 0) {
						this.haveMore = false;
						return
					}
					if(this.recommend.length == 0) {
						this.recommend = res.res.homepage[1].items;
						this.monthes = res.res.homepage[2];
						this.monthes.MM = moment(this.monthes.stime).format("MM");
						this.monthes.DD = moment(this.monthes.stime).format("DD");
					}
					
					this.vertical = [...this.vertical, ...res.res.vertical];
				}
			},
			handleTolower() {
				if(this.haveMore) {
					this.params.skip += this.params.limit;
					this.getHot()
				}else {
					uni.showToast({
						title:"没有更多数据了",
						icon: 'none'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped >
.recommend_view {
  // height：屏幕的高度 -  头部标题的高度
  height: calc(100vh - 36px);
}
.recommend_wrap {
  // flex布局
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}
.monthes_wrap {
  .monthes_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .monthes_title_info {
      color: $color;
      font-size: 30rpx;
      font-weight: 600;
      display: flex;
      .monthes_info {
        text {
          font-size: 36rpx;
        }
      }

      .monthes_text {
        font-size: 34rpx;
        color: #666;
        margin-left: 30rpx;
      }
    }

    .monthes_title_more {
      font-size: 24rpx;
      color: $color;
    }
  }

  .monthes_content {
    display: flex;
    flex-wrap: wrap;
    .monthes_item {
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}
.hots_wrap {
  .hots_title {
    padding: 20rpx;
    text {
      border-left: 20rpx solid $color;
      padding-left: 20rpx;
      font-size: 34rpx;
      font-weight: 600;
    }
  }

  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hot_item {
      width: 33.33%;
      border: 5rpx solid #fff;
      image {
      }
    }
  }
}
</style>
